<template>
    <el-select
      v-model="selectvalue"
      placeholder="状态筛选"
      size="large"
      style="width: 240px"
    >
      <el-option
        v-for="item in selectoptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-button type="success" @click="onDialog()">
        筛选
    </el-button>
  <el-table :data="tableData" stripe style="width: 90%">
    <el-table-column label="图片" width="180">
        <template #default="scope">
            <div class="demo-fit" v-if="scope.row.g_img.length != 0">
                <el-carousel height="110px" arrow="never">
                <el-carousel-item v-for="item in scope.row.g_img" :key="item.name">
                    <el-avatar shape="square" :size="100" :src="item.url" />
                </el-carousel-item>
                </el-carousel>
            </div>
            <div v-else>
                <el-avatar  shape="square" src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"  style="width: 100px; height: 100px;"/>
            </div>
        </template>
    </el-table-column>
    <el-table-column prop="g_name" label="商品名称" width="120"/>
    <el-table-column prop="g_price" label="价格" width="80" />
    <el-table-column prop="username" label="购买用户" width="120" />
    <el-table-column prop="g_info" label="商品描述" >
        <template #default="scope">
            <el-text line-clamp="2" truncated style="width:150px">
                {{scope.row.g_info}}
            </el-text>
        </template>
    </el-table-column>
    <el-table-column prop="product_order_state" label="状态" width="120">
        <template #default="scope">
            <div style="display: flex;">
                <el-tag type="primary" v-if="scope.row.product_order_state == 1">待发货</el-tag>
                <el-tag type="success" v-if="scope.row.product_order_state == 2">待收货</el-tag>
                <el-tag type="info" v-if="scope.row.product_order_state == 3">待评价</el-tag>
                <el-tag type="danger" v-if="scope.row.product_order_state == 4">待退款</el-tag>
                <el-tag type="warning" v-if="scope.row.product_order_state == 0">已退款</el-tag>
            </div>
        </template>
    </el-table-column>
    <el-table-column label="操作">
        <template #default="scope">
            <div style="display: flex;">
                <el-button type="warning" @click="onEditState(scope.row,'发货')" v-if="scope.row.product_order_state == 1">发货</el-button>
                <el-button type="danger" @click="onEditState(scope.row,'退款')" v-if="scope.row.product_order_state == 4">退款</el-button>
            </div>
        </template>
    </el-table-column>
  </el-table>
    <div style="display: flex; justify-content: center; margin: 30px 0;">
        <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 50, 100, 200]"
        background
        layout="sizes, prev, pager, next"
        :total="total"
        @size-change="SizeChange"
        @current-change="CurrentChange"
        />
    </div>
  <goodslog v-if="showDia" :showDia = "showDia" @showDiaf="showDiaf" :title="title" :nid="nid"></goodslog>
</template>
<script lang='ts' setup>
import { ref, toRefs,reactive,onMounted } from "vue"
import { productOrderListApi, productOrderPutApi } from "../composables/http"
import {
  Delete,
  Edit,
  UserFilled
} from '@element-plus/icons-vue'
import goodslog from "../components/goodslog.vue";
import { ElMessage  } from 'element-plus'
const title =ref("")
const selectvalue =ref("")
const selectoptions =ref([
    { label: '全部', value: '' },
    { label: '待发货', value: '1' },
    { label: '待收货', value: '2' },
    { label: '待评价', value: '3' },
    { label: '待退款', value: '4' },
    { label: '已退款', value: '0' }
])
const data =reactive<{
    tableData: API.goodsOneRes[],
    showDia:boolean,
    nid:number,
    username:string,
    pageSize:number,
    currentPage:number,
    total:number
}>({
    tableData: [
    ],
    showDia:false,
    nid:0,
    username:"",
    pageSize:10,
    currentPage:1,
    total:0,

})
onMounted(()=>{
    data.username = (window.localStorage.getItem('d_user')as string);
    onDataList()
})
const onDataList = async()=>{
    let d:any = ""
    if (selectvalue.value) {
        d = await productOrderListApi(data.currentPage, data.pageSize,selectvalue.value)
    }else{
        d = await productOrderListApi(data.currentPage, data.pageSize)
    }
    if (d.code == 200){
        data.tableData = d.data
        data.total = d.count as number
        data.tableData.forEach(e => {
            if(e.g_img.length > 0){
                e.g_img = JSON.parse(e.g_img as any)
            }
        })
    }
}

const onDialog = ()=>{
    onDataList()
}
const onEditState = async(v:any,type:string)=>{
    console.log(v);
    let datas
    if (type==='发货') {
        datas = {
            product_order_id: v.product_order_id,
            product_order_state: 2
        }
    } else {
        datas = {
            product_order_id: v.product_order_id,
            product_order_state: 0
        }
    }
    try {
    const d = await productOrderPutApi(v.username, datas)
        if(d.code == 200){
            onDataList()
        }
    } catch (error) {
        console.log(error);
    }
}
const showDiaf = (val:boolean)=>{
    data.showDia = val
    onDataList()
}
const CurrentChange = ()=>{
    onDataList()
}
const SizeChange = ()=>{
    onDataList()
}
const { tableData, showDia, nid, pageSize, currentPage, total }= toRefs(data)
</script>
<style lang='scss' scoped>

</style>